<template>
  <section class="container">
    <!--首页banner图-->
    <div class="banner">
      <div class="banner_title">
              <h2>城市商用车首选</h2>
              <h2 class="left_h2">新能源服务平台</h2>
        <div class="banner_title_bg">
                <h2>新能源</h2>
                <h2>新物流</h2>
        </div>
      </div>

    </div>
    <div class="holder">
      <!--平台定位-->
      <div class="holder_box">

        <div class="holder_box_item"></div>
        <div class="holder_box_title">
          <p>新能源发展趋势毋庸置疑，随着补贴的下滑，行业会更专注于
            产品本身，通过降低成本，挖掘运营价值提升整体销量。我们
            将重点放在了运营价值深度挖掘之上，通过联动传统经销商，
            整体运营，挖掘链条更多的价值，让经销商更容易做业务是当
            下也是未来非常具有意义的事。平台定位因此而生，我们为这
            个行业做服务，串联主机厂与经销商，依托科技催生出的互联
            网技术、车联网技术、区块链技术、无人驾驶技术，为运营赋
            能，加深新能源对市场的渗透，扛起新能源不断发展前行重任。</p>
        </div>
      </div>
      <div class="holder_box2">
        <div class="holder_box2_title">
          <h1>金融服务平台</h1>
          <h2>金融服务——让车源更有优势</h2>
        </div>
      </div>
      <div class="holder_box3">
        <div class="holder_box3_img">

        </div>
        <div class="holder_box3_title">
          <div class="holder_box3_item">
            <h2>城配服务平台</h2>
            <ul class="holder_box3_item_list">
              <li><span class="dot"></span> 提高车厢利用率</li>
              <li><span class="dot"></span> 提高司机效率</li>
              <li><span class="dot"></span> 提高服务标准</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="holder_box4">
        <div class="holder_box4_img"></div>
        <div class="holder_box4_txt">
          <div class="holder_box4_item">
            <h2>租赁服务平台</h2>
            <h4>帮助运营商做好用户端的分时、长期租赁。</h4>
          </div>
        </div>
      </div>
      <div class="holder_box5">
        <div style="text-align: center">
          <h2>售后服务平台</h2>
        </div>
        <div>
          <p>享来享去提供在线服务平台，车主可以在手机APP或者小 程序的首页地图上，
            看到周边的服务站与充电桩， 并且可 以与服务站进行图文互动，在线解决疑难杂症。</p>
        </div>
      </div>
      <div class="holder_box6">
        <div class="holder_box6_title">
          <h1>我们的业务</h1>
          <h2>一键发货、一键租车--让操作更方便</h2>
        </div>
      </div>
      <div class="holder_box7">
        <div class="holder_box7_title">
          <h2>体验总结</h2>
          <div class="holder_box7_item">
            <div class="holder_box7_img">

            </div>
            <div class="holder_box7_list">
              <ul>
                <li style="margin-top:30px ">
                  <span class="dot"></span>底层技术搭建
                </li>
                <li>
                  <span class="dot"></span>平台规则制定
                </li>
                <li>
                  <span class="dot"></span>吸纳技术服务商
                </li>
                <li>
                  <span class="dot"></span>自有技术服务
                </li>
                <li>
                  <span class="dot"></span>自有推广服务
                </li>
              </ul>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>
</template>

<script>

  export default {
    layout: 'layout',
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    .banner {
      width: 100%;
      height: 650px;
      position: relative;
      background: url("../assets/img/home/bnner.png") no-repeat center bottom;
      background-size: cover;
      .banner_title {
        width: 400px;
        position:relative;
        top:50px;
        left:calc(50% - 500px);
        h2{
          font-size: 40px;
          font-weight: 600;
          margin-bottom: 5px;
        }
        .left_h2{
          margin-left: 40px;
        }
        .banner_title_bg{
            width: 300px;
            height: 50px;
          background: url("../assets/img/home/bg3.png") no-repeat 0 100%;
          background-size: cover;
          text-align: center;
          h2{
            font-size: 30px;
            font-weight: 600;
            display: inline-block;
            color:#fff;
            margin: 0 15px 0 15px;
            position:relative;
            top:calc(50% - 17px);

          }
        }
      }
    }
    .holder {
      width: 100%;
      .holder_box {
        width: 1200px;
        height: 500px;
        margin: 0 auto;
        .holder_box_item {
          width: 200px;
          height: 347px;
          display: inline-block;
          float: left;
          position: relative;
          top: calc(50% - 174px);
          margin-left: 150px;
          background: url("../assets/img/home/banner8.png") no-repeat center center;
          background-size: cover;
        }
        .holder_box_title {
          width: 450px;
          display: inline-block;
          margin-left: 215px;
          line-height: 26px;
          position: relative;
          top: calc(50% - 120px);
          .holder_box_title p {
            font-size: 18px;
            color: #646464;

          }
        }
      }
      .holder_box2 {
        width: 100%;
        height: 600px;
        background: url("../assets/img/home/banner2.png") no-repeat center center;
        background-size: cover;
        position: relative;
        .holder_box2_title {
          width: 908px;
          position: relative;
          top: calc(50% - 56px);
          margin: 0 auto;
          text-align: center;
          color: #fff;
          h1 {
            font-size: 35px;
            font-weight: 400;
          }
          h2 {
            font-size: 35px;
            font-weight: 400;
            margin-top: 32px;
          }
        }
      }
      .holder_box3 {
        width: 100%;
        height: 610px;
        background: #f6f6f6;
        overflow: hidden;
        .holder_box3_img {
          width: 47%;
          height: 100%;
          float: left;
          margin-left: 100px;
          background: url("../assets/img/home/banner3.png") no-repeat center center;
          background-size: cover;
        }
        .holder_box3_title {
          width: 42%;
          float: left;
          position: relative;
          top: calc(50% - 93px);
          .holder_box3_item {
            h2 {
              margin-left: 100px;
              font-weight: 400;
              font-size: 35px;
              color: #FF8A01;
            }
            ul {
              margin-top: 35px;
              margin-left: 100px;
            }
            li {
              margin-top: 28px;
              list-style: none;
              .dot {
                display: inline-block;
                width: 6px;
                height: 6px;
                background: #FF8A01;
                border-radius: 50%;
              }
            }
          }
        }
      }
      .holder_box4 {
        width: 100%;
        height: 455px;
        overflow: hidden;
        .holder_box4_img {
          width: 53%;
          height: 100%;
          float: left;
          background: url('../assets/img/home/banner4.png') no-repeat center center;
          background-size: cover;
        }
        .holder_box4_txt {
          height: 100%;
          width: 47%;
          background: #FF8A01;
          float: right;
          .holder_box4_item {
            text-align: center;
            position: relative;
            top: calc(50% - 48px);
            h2 {
              font-weight: 400;
              font-size: 33px;
              color: #fff;
            }
            h4 {
              color: #fff;
              font-weight: 400;
              font-size: 25px;
              margin-top: 15px;
            }
          }
        }
      }
      .holder_box5 {
        margin: 0 auto;
        width: 1200px;
        padding-top: 76px;
        h2 {
          font-weight: 400;
          font-size: 35px;
          color: #FF8A01;
          margin-bottom: 40px;
        }
        p {
          font-size: 20px;
          margin-bottom: 72px;
        }
      }
      .holder_box6 {
        height: 666px;
        background: url("../assets/img/home/banner5.png") center center;
        background-size: cover;
        .holder_box6_title {
          width: 908px;
          margin: 0 auto;
          position: relative;
          top: calc(50% - 59px);
          text-align: center;
          color: #fff;
          h1 {
            font-size: 40px;
            font-weight: 400;
          }
          h2 {
            font-size: 35px;
            font-weight: 400;
            margin-top: 32px;
          }
        }
      }
      .holder_box7 {
        width: 1200px;
        height: 560px;
        margin: 0 auto;
        .holder_box7_title {
          text-align: center;
          padding: 40px 0;
          color: #FF8A01;
          h2 {
            font-size: 45px;
            font-weight: 400;
            font-family: SourceHanSansCN-Regular;
            margin-bottom: 70px;
          }
          .holder_box7_item {
            width: 100%;
            overflow: hidden;
            .holder_box7_img {
              float: left;
              width: 450px;
              height: 346px;
              margin-left: 150px;
              background: url("../assets/img/home/banner7.png") no-repeat top center;
              background-size: cover;

            }
            .holder_box7_list {
              float: left;
              width: 300px;
              text-align: left;
              ul {
                list-style: none;
                color: #646464;
                margin-left: 150px;
                li {
                  margin: 50px 0;
                  line-height: 10px;
                  .dot {
                    display: inline-block;
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    background: #FF8A01;
                    margin-right: 10px;
                  }
                }
              }
            }
          }

        }
      }
    }

  }
</style>
